<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<!-- <base href="<%=basePath%>"> -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
</head>
<body>

	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<h1>hELLO</h1>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary" id="user_add_modal_btn">新增</button>
				<button class="btn btn-danger" id="user_delete_all_btn">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="user_table">
					<thead>
						<tr>
							<th><input type="checkbox" id="check_all" /></th>
							<th>#</th>
							<th>userName</th>
							<th>gender</th>
							<th>email</th>
							<th>roleName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- 显示分页信息 -->
	<div class="row">
		<!--分页文字信息  -->
		<div class="col-md-3"></div>

		<div class="col-md-4" id="page_info_area"></div>
		<!-- 分页条信息 -->
		<div class="col-md-5" id="page_nav_area"></div>
	</div>


	<!-- 员工添加的模态框 -->
	<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加用户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-10">
								<input type="text" name="username" class="form-control"
									id="username_add_input" placeholder="username"> <span
									class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">email</label>
							<div class="col-sm-10">
								<input type="text" name="email" class="form-control"
									id="email_add_input" placeholder="email"> <span
									class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">gender</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="gender" id="gender1_add_input" value="M"
									checked="checked"> 男
								</label> <label class="radio-inline"> <input type="radio"
									name="gender" id="gender2_add_input" value="F"> 女
								</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">roleName</label>
							<div class="col-sm-4">
								<!-- 部门提交部门id即可 -->
								<select class="form-control" name="roleid">
								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="user_save_btn">保存</button>
				</div>
			</div>
		</div>
	</div>


	<!-- 员工修改的模态框 -->
	<div class="modal fade" id="userUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">用户修改</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">
			  <div class="form-group">
			    <label class="col-sm-2 control-label">用户名</label>
			    <div class="col-sm-10">
			      	<p class="form-control-static" id="userName_update_static"></p>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">email</label>
			    <div class="col-sm-10">
			      <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">gender</label>
			    <div class="col-sm-10">
			      <label class="radio-inline">
					  <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">roleId</label>
			    <div class="col-sm-4">
			    	<!-- 部门提交部门id即可 -->
			      <select class="form-control" name="roleId">
			      </select>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="user_update_btn">更新</button>
	      </div>
	    </div>
	  </div>
	</div>

</body>

<script type="text/javascript">
	$(function() {

		//去首页
		to_page(1);
	});

	var totalRecord, currentPage;

	//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
	function to_page(pageNum) {
		$.ajax({
			url : "/user/AjaxList",
			data : "pageNum=" + pageNum,
			type : "GET",
			success : function(result) { //返回的结果

				//console.log(result);

				//1、解析并显示员工数据
				build_user_table(result);

				//2、解析并显示分页信息
				build_page_info(result)

				//3、解析显示分页条数据
				build_page_nav(result)

			}
		});
	}

	//1、解析并显示员工数据
	function build_user_table(result) {
		//清空table表格
		$("#user_table tbody").empty();
		var users = result.data.list;
		$.each(users,function(index, item) {
			
			var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
			var userIdTd = $("<td></td>").append(item.id);
			var userNameTd = $("<td></td>").append(
					item.username);
			var genderTd = $("<td></td>").append(
					item.gender == 'M' ? "男" : "女");
			var emailTd = $("<td></td>").append(item.email);
			var roleNameTd = $("<td></td>").append(
					item.role.rolename);
			/**
			<button class="">
								<span class="" aria-hidden="true"></span>
								编辑
							</button>
			 */
			var editBtn = $("<button></button>").addClass(
					"btn btn-primary btn-sm edit_btn").append(
					$("<span></span>").addClass(
							"glyphicon glyphicon-pencil"))
					.append("编辑");

			//为编辑按钮添加一个自定义的属性，来表示当前员工id
			editBtn.attr("edit-id", item.id);
			var delBtn = $("<button></button>").addClass(
					"btn btn-danger btn-sm delete_btn").append(
					$("<span></span>").addClass(
							"glyphicon glyphicon-trash"))
					.append("删除");

			//为删除按钮添加一个自定义的属性来表示当前删除的员工id
			delBtn.attr("del-id", item.id);
			var btnTd = $("<td></td>").append(editBtn).append(
					" ").append(delBtn);

			//append方法执行完成以后还是返回原来的元素
			$("<tr></tr>").append(checkBoxTd).append(userIdTd)
					.append(userNameTd).append(genderTd)
					.append(emailTd).append(roleNameTd).append(
							btnTd)
					.appendTo("#user_table tbody");
		});
	}

	//2、解析并显示分页信息
	function build_page_info(result) {

		//清空
		$("#page_info_area").empty();
		$("#page_info_area").append(
				"当前 " + result.data.pageNum + " 页,总 " + result.data.pages
						+ " 页,总 " + result.data.total + " 条记录");
		totalRecord = result.data.total;
		currentPage = result.data.pageNum;
	}

	//3.解析显示分页条，点击分页要能去下一页....
	function build_page_nav(result) {

		$("#page_nav_area").empty();
		
		var ul = $("<ul></ul>").addClass("pagination");

		//构建元素
		var firstPageLi = $("<li></li>").append(
				$("<a></a>").append("首页").attr("href", "#"));

		var prePageLi = $("<li></li>").append($("<a></a>").attr("href", "#").append("&laquo;"));

		if (result.data.hasPreviousPage == false) {

			firstPageLi.addClass("disabled");

			prePageLi.addClass("disabled");

		} else {

			//为元素添加点击翻页的事件
			firstPageLi.click(function() {

				to_page(1);
			});

			prePageLi.click(function() {
				to_page(result.data.pageNum - 1);
			});
		}

		var nextPageLi = $("<li></li>").append($("<a></a>").attr("href", "#").append("&raquo;"));

		var lastPageLi = $("<li></li>").append(
				$("<a></a>").append("末页").attr("href", "#"));

		if (result.data.hasNextPage == false) {

			nextPageLi.addClass("disabled");

			lastPageLi.addClass("disabled");

		} else {

			nextPageLi.click(function() {

				to_page(result.data.pageNum + 1);
			});

			lastPageLi.click(function() {

				to_page(result.data.pages);

			});
		}

		//添加首页和前一页的提示
		ul.append(firstPageLi).append(prePageLi);

		//1,2，3遍历给ul中添加页码提示
		$.each(result.data.navigatepageNums, function(index, item) {

			var numLi = $("<li></li>").append($("<a></a>").attr("href", "#").append(item));

			if (result.data.pageNum == item) {

				numLi.addClass("active");

			}

			numLi.click(function() {

				to_page(item);

			});

			ul.append(numLi);
		});

		//添加下一页和末页 的提示
		ul.append(nextPageLi).append(lastPageLi);

		//把ul加入到nav
		var navEle = $("<nav></nav>").append(ul);

		navEle.appendTo("#page_nav_area");
	}

	/* ------------------------------------ 添加 ------------------------------------ */

	//清空表单样式及内容
	function reset_form(ele){
		
		$(ele)[0].reset();
		
		//清空表单样式
		$(ele).find("*").removeClass("has-error has-success");
		
		$(ele).find(".help-block").text("");
	}
	
	//点击新增按钮弹出模态框。
	$("#user_add_modal_btn").click(function(){
		
		//清除表单数据（表单完整重置（表单的数据，表单的样式））
		reset_form("#userAddModal form");
		
		//s$("")[0].reset();
		
		//发送ajax请求，查出部门信息，显示在下拉列表中
		getRoles("#userAddModal select");
		
		//弹出模态框
		$("#userAddModal").modal({
			backdrop:"static"
		});
	});
	
	
	//查出所有的用户信息并显示在下拉列表中
	function getRoles(ele){
		//清空之前下拉列表的值
		$(ele).empty();
		
		$.ajax({
			url:"/roles",
			type:"GET",
			success:function(result){
				
				//console.log(result);
				
				//显示部门信息在下拉列表中
				
				$.each(result.data,function(){
					
					var optionEle = $("<option></option>").append(this.rolename).attr("value",this.id);
				
					optionEle.appendTo(ele);
				});
			}
		});
	}
	
	
	//校验表单数据
	function validate_add_form(){
		
		//1、拿到要校验的数据，使用正则表达式
		var userName = $("#username_add_input").val();
		
		var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
		
		if(!regName.test(userName)){
			
			//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
			
			show_validate_msg("#username_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
			
			return false;
			
		}else{
			
			show_validate_msg("#username_add_input", "success", "");
		};
		
		//2、校验邮箱信息
		var email = $("#email_add_input").val();
		
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		
		if(!regEmail.test(email)){
			
			//alert("邮箱格式不正确");
			//应该清空这个元素之前的样式
			show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
			
			/* $("#email_add_input").parent().addClass("has-error");
			$("#email_add_input").next("span").text("邮箱格式不正确"); */
			return false;
			
		}else{
			
			show_validate_msg("#email_add_input", "success", "");
		}
		return true;
	}
	

	//显示校验结果的提示信息
	function show_validate_msg(ele,status,msg){
		//清除当前元素的校验状态
		$(ele).parent().removeClass("has-success has-error");
		$(ele).next("span").text("");
		
		if("success"==status){
			
			$(ele).parent().addClass("has-success");
			
			$(ele).next("span").text(msg);
			
		}else if("error" == status){
			
			$(ele).parent().addClass("has-error");
			
			$(ele).next("span").text(msg);
		}
	}
	
	
	//校验用户名是否可用
	$("#username_add_input").change(function(){
		
		//发送ajax请求校验用户名是否可用
		var userName = this.value;
		$.ajax({
			url:"/user/check",
			data:"username="+userName,
			type:"POST",
			
			success:function(result){
				
				if(result.status==200){
					
					show_validate_msg("#username_add_input","success","用户名可用");
					
					$("#user_save_btn").attr("ajax-va","success");
					
				}else{
					//show_validate_msg("#username_add_input","error",result.extend.va_msg);
					$("#user_save_btn").attr("ajax-va","error");
				}
			}
		});
	});
	
	//点击保存，保存员工。
	$("#user_save_btn").click(function(){
		//1、模态框中填写的表单数据提交给服务器进行保存
		//1、先对要提交给服务器的数据进行校验
		
		alert("hello");
		
		if(!validate_add_form()){
			
			return false;
		};
		
		//1、判断之前的ajax用户名校验是否成功。如果成功。
		if($(this).attr("ajax-va")=="error"){
			
			return false;
		}
		
		alert("hello");
		
		//2、发送ajax请求保存员工
		$.ajax({
			url:"/user/add",
			type:"POST",
			data:$("#userAddModal form").serialize(),
			success:function(result){
				alert(result.msg);
				if(result.status == 200){
					//员工保存成功；
					//1、关闭模态框
					$("#userAddModal").modal('hide');
					
					//2、来到最后一页，显示刚才保存的数据
					//发送ajax请求显示最后一页数据即可
					to_page(totalRecord);
					
				}else{
					//显示失败信息
					//console.log(result);
					//有哪个字段的错误信息就显示哪个字段的；
				    if(result.status == 300 ){
						//显示邮箱错误信息
						show_validate_msg("#email_add_input", "error", result.msg);
					}
					if(result.status == 100 ){
						//显示员工名字的错误信息
						//show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
					}
					
				}
			}
		});
	});
	
	/* ------------------------------------ 更新 ------------------------------------ */
	
	//1、我们是按钮创建之前就绑定了click，所以绑定不上。
	//1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()
	//jquery新版没有live，使用on进行替代
	$(document).on("click",".edit_btn",function(){
		//alert("edit");
		
		//1、查出部门信息，并显示部门列表
		getRoles("#userUpdateModal select");
		//2、查出员工信息，显示员工信息
		getUser($(this).attr("edit-id"));
		
		//3、把员工的id传递给模态框的更新按钮
		$("#user_update_btn").attr("edit-id",$(this).attr("edit-id"));
		$("#userUpdateModal").modal({
			backdrop:"static"
		});
	});
	
	function getUser(id){
		$.ajax({
			url:"user/getById/"+id,
			type:"GET",
			success:function(result){
				//console.log(result);
				var userData = result.data;
				$("#userName_update_static").text(userData.username);
				$("#email_update_input").val(userData.email);
				$("#userUpdateModal input[name=gender]").val([userData.gender]);
				$("#userUpdateModal select").val([userData.roleid]);
			}
		});
	}
	
	//点击更新，更新员工信息
	$("#user_update_btn").click(function(){
		//验证邮箱是否合法
		//1、校验邮箱信息
		var email = $("#email_update_input").val();
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(!regEmail.test(email)){
			show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
			return false;
		}else{
			show_validate_msg("#email_update_input", "success", "");
		}
		
		//2、发送ajax请求保存更新的员工数据
		$.ajax({
			url:"/user/update/"+$(this).attr("edit-id"),
			type:"PUT",
			data:$("#userUpdateModal form").serialize(),
			success:function(result){
				//alert(result.msg);
				//1、关闭对话框
				$("#userUpdateModal").modal("hide");
				//2、回到本页面
				to_page(currentPage);
			}
		});
	});
	
	
	/* ------------------------------------ 单个删除 ------------------------------------ */
	
	//单个删除
	$(document).on("click",".delete_btn",function(){
		//1、弹出是否确认删除对话框
		var username = $(this).parents("tr").find("td:eq(2)").text();
		var id = $(this).attr("del-id");
		//alert($(this).parents("tr").find("td:eq(1)").text());
		if(confirm("确认删除【"+username+"】吗？")){
			//确认，发送ajax请求删除即可
			$.ajax({
				url:"/user/delete/"+id,
				type:"DELETE",
				success:function(result){
					//alert(result.msg);
					//回到本页
					to_page(currentPage);
				}
			});
		}
	});
	
	/* ------------------------------------ 批量删除 ------------------------------------ */
	
	//完成全选/全不选功能
	$("#check_all").click(function(){
		//attr获取checked是undefined;
		//我们这些dom原生的属性；attr获取自定义属性的值；
		//prop修改和读取dom原生属性的值
		$(".check_item").prop("checked",$(this).prop("checked"));
	});
	
	//check_item
	$(document).on("click",".check_item",function(){
		//判断当前选择中的元素是否5个
		var flag = $(".check_item:checked").length==$(".check_item").length;
		$("#check_all").prop("checked",flag);
	});
	
	//点击全部删除，就批量删除
	$("#user_delete_all_btn").click(function(){
		//
		var userNames = "";
		var del_idstr = "";
		$.each($(".check_item:checked"),function(){
			//this
			userNames += $(this).parents("tr").find("td:eq(2)").text()+",";
			//组装员工id字符串
			del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
		});
		//去除userNames多余的,
		userNames = userNames.substring(0, userNames.length-1);
		//去除删除的id多余的-
		del_idstr = del_idstr.substring(0, del_idstr.length-1);
		
		if(confirm("确认删除【"+userNames+"】吗？")){
			
			//发送ajax请求删除
			$.ajax({
				url:"/user/delete/"+del_idstr,
				type:"DELETE",
				success:function(result){
					//alert(result.msg);
					//回到当前页面
					to_page(currentPage);
				}
			});
		}
	});
		
		
</script>

</html>